<template>
  <div class="WXmenu">
    <el-collapse accordion>
      <el-collapse-item v-for="x in 3" :key="`menu-${x}`">
        <template #title>
          <div class="header">
            <span>{{ menuConfig[x - 1].name || '待添加' }}</span>
            <div class="btn-group">
              <el-button
                type="primary"
                size="mini"
                @click.stop="
                  () => {
                    editDia = true
                    currentEditMenu.idx = { x: x - 1, n: -1 }
                    Object.assign(currentEditMenu.menu, menuConfig[x - 1])
                  }
                "
                >编辑</el-button
              >
              <el-popconfirm
                title="确定删除此菜单？"
                confirmButtonText="确定"
                cancelButtonText="取消"
                @confirm="delMenu(x)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="mini"
                    :disabled="!menuConfig[x - 1].name.length"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </div>
          </div>
        </template>
        <ul>
          <li
            class="sub-menu"
            v-for="n in 5"
            :key="`sub-menu-${n}`"
            v-on:dragover="$event => $event.preventDefault()"
            v-on:drop="drop($event)"
          >
            <div
              :id="`label-${x}-${n}`"
              draggable="true"
              v-on:dragstart="
                $event =>
                  $event.dataTransfer.setData('dragId', $event.target.id)
              "
            >
              <span>
                {{ menuConfig[x - 1].sub_button[n - 1].name || '待添加' }}</span
              >
              <span
                ><el-tag type="success" size="small">{{
                  menuConfig[x - 1].sub_button[n - 1].type || '待添加'
                }}</el-tag></span
              >
              <div class="btn-group">
                <el-button
                  type="primary"
                  size="mini"
                  @click="
                    () => {
                      editDia = true
                      currentEditMenu.idx = { x: x - 1, n: n - 1 }
                      Object.assign(
                        currentEditMenu.menu,
                        menuConfig[x - 1].sub_button[n - 1]
                      )
                    }
                  "
                  :disabled="menuConfig[x - 1].type !== 'none'"
                  >编辑</el-button
                >

                <el-popconfirm
                  title="确定删除此菜单？"
                  confirmButtonText="确定"
                  cancelButtonText="取消"
                  @confirm="delMenu(x, n)"
                >
                  <template #reference>
                    <el-button
                      type="danger"
                      size="mini"
                      :disabled="
                        menuConfig[x - 1].type !== 'none' ||
                        !menuConfig[x - 1].sub_button[n - 1].name.length
                      "
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <div class="submit">
      <el-button type="success" size="small" @click="submitMenu"
        >提交保存</el-button
      >
      <el-button type="info" size="small" @click="getMenuConfig"
        >重置菜单</el-button
      >
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑菜单" v-model="editDia" width="40%">
      <el-form label-width="80px" :model="currentEditMenu.menu">
        <el-form-item label="菜单名称">
          <el-input v-model="currentEditMenu.menu.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-select
            v-model="currentEditMenu.menu.type"
            placeholder="选择菜单类型"
            size="small"
          >
            <el-option
              :label="_m"
              :value="_m"
              v-for="(_m, _i) in WX_menu__"
              :key="_i"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="currentEditMenu.menu.type === 'click' ? 'key' : 'url'"
        >
          <el-input
            v-model="
              currentEditMenu.menu[
                currentEditMenu.menu.type === 'click' ? 'key' : 'url'
              ]
            "
            :disabled="currentEditMenu.menu.type === 'none'"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDia = false" size="mini">取 消</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="
              () => {
                editDia = false
                currentEditMenu.idx.n !== -1
                  ? (menuConfig[currentEditMenu.idx.x].sub_button[
                      currentEditMenu.idx.n
                    ] = Object.assign({}, currentEditMenu.menu))
                  : (menuConfig[currentEditMenu.idx.x] = Object.assign(
                      {},
                      currentEditMenu.menu
                    ))
              }
            "
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { useMenu } from '../../composable/useMenu'
import { WX_menu__ } from '../../utils'
import {
  ElInput,
  ElButton,
  ElMessage,
  ElDialog,
  ElForm,
  ElFormItem,
  ElCollapse,
  ElCollapseItem,
  ElSelect,
  ElOption,
  ElTag,
  ElPopconfirm,
} from 'element-plus'
export default defineComponent({
  components: {
    ElInput,
    ElButton,
    ElDialog,
    ElSelect,
    ElOption,
    ElForm,
    ElFormItem,
    ElCollapse,
    ElCollapseItem,
    ElTag,
    ElPopconfirm,
  },
  setup() {
    const {
      menuConfig,
      getMenuConfig,
      submitMenu,
      currentEditMenu,
      delMenu,
    } = useMenu()

    // 展示编辑弹窗
    const editDia = ref(false)
    // 放置事件(子菜单交换事件处理)
    const drop = e => {
      const dragId = e.dataTransfer.getData('dragId')
      const dropId = e.target.id
      let _a = dragId.split('-').map(a => parseInt(a) - 1)
      let _b = dropId.split('-').map(b => parseInt(b) - 1)
      let tempObj = null
      if (
        _a[1] !== _b[1] ||
        !Object.keys(menuConfig.value[_a[1]]).includes('sub_button') ||
        menuConfig.value[_a[1]].sub_button.length === 1
      )
        return
      try {
        tempObj = menuConfig.value[_a[1]].sub_button[_a[2]]
        menuConfig.value[_a[1]].sub_button[_a[2]] =
          menuConfig.value[_b[1]].sub_button[_b[2]]
        menuConfig.value[_b[1]].sub_button[_b[2]] = tempObj
      } catch (err) {
        ElMessage.error({
          message: '发生了一个错误，请重试',
        })
      }
    }
    onMounted(getMenuConfig)
    return {
      WX_menu__,
      menuConfig,
      drop,
      editDia,
      getMenuConfig,
      submitMenu,
      currentEditMenu,
      delMenu,
    }
  },
})
</script>

<style lang="scss">
@import '../../assets/styles/_var.scss';
$main-menu-height: 40px;
@mixin label() {
  color: $gray-6;
  height: $main-menu-height;
  flex-shrink: 0;
}
.WXmenu {
  position: relative;
  height: 100%;
  .header {
    width: 100%;
    display: flex;
    padding-left: $pad-1;
    .btn-group {
      padding-right: $pad-1;
      margin-left: auto;
    }
  }
  ul {
    margin: 0;
    padding: 0;
    .sub-menu {
      list-style: none;
      background: $gray-1;
      height: $main-menu-height;
      margin-top: $pad-1;
      margin-left: 40px;
      div[id*='label'] {
        @include label();
        display: flex;
        align-items: center;
        margin: 0 auto;
        width: calc(100% - 40px);
        cursor: move;
        & > span {
          display: block;
          width: 100px;
        }
        & > *:last-child {
          padding-right: $pad-1;
          margin-left: auto;
        }
      }
    }
  }
  .submit {
    position: fixed;
    display: flex;
    justify-content: center;
    bottom: 0;
    width: calc(100vw - #{$slider-width});
    padding: $pad-2 0;
  }
  .el-select {
    width: 100%;
  }
}
</style>
